<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
// 将cesium 目录下的Build/cesium 4个目录拷贝到public下, widgets拷贝一份到src下
import * as Cesium from 'cesium'
import "./Widgets/widgets.css"
import { onMounted} from 'vue'

// 设置cesium token 
// https://ion.cesium.com/tokens?page=1
// 去除页脚提示信息  this application is using Cesium's default ion access token. Please assign Cesiu
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ODEyNzdmNi1jNDY2LTQ3NzUtOGRhMy0xZWIwODI4OTMwMTYiLCJpZCI6MzA0NzUxLCJpYXQiOjE3NDc4MTU3MDl9.Wx7aw95pNtpmdql27PABOntR7sfuJ5s9V0Ncz7PuORk'
// 设置cesium静态资源路径
window.CESIUM_BASE_URL = '/'
// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边经度
  89.5,
  // 南边纬度
  20.4,
  // 东边经度
  110.4,
  // 北边纬度
  61.2
)

onMounted(()=>{
  const viewer = new Cesium.Viewer('cesiumContainer',{
    // 是否显示信息窗口
    infoBox: false,
    // 左上角搜索框
    geocoder: false,
    // 不显示home按钮
    homeButton: false,
    // 控制查看器显示模式
    sceneModePicker: false,
    // 是否显示图层显示器
    baseLayerPicker: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 是否显示下方动画控制按钮
    animation: false,
    // 是否显示时间轴
    timeline: false,
    // 是否显示全屏按钮
    fullscreenButton: false,
    // 设置天空盒子
    // skyBox: new Cesium.SkyBox({
    //   sources: {

    //   }
    // })
    // 天地图矢量路径
    // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    //   url: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&layer=vec&tileMatrixSet=w&format=tiles&tileMatrix={z}&tileRow={y}&tileCol={x}&tk=您的密钥',
    //   layer: 'tdtBasicLayer',
    //   style: 'default',
    //   format: 'image/jpeg',
    //   tileMatrixSetID: 'GeogleMapsCompatible'
    // }),
    // OSM地图
    // imageryProvider: new Cesium.OpenStreetMapImageryProvider({
    //   url: 'https://a.tile.openstreetmap.org/',
    // }),
    // 高德矢量地图
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      layer: 'tdtVecBasicLayer',
      style: 'default',
      format: 'image/png',
      tileMatrixSetID: 'GeogleMapsCompatible'
    })
  })
  console.log(viewer)
  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'
})

</script>

<style>
*{
  margin: 0;
  padding: 0;
}

#cesiumContainer{
  width: 100vw;
  height: 100vh;
}
</style>
